<template>
  <div class="w-full h-full bg-[#F2F4F5]" style="font-size: 16px">
    <div class="max-w-[1440px] pt-[30px] px-[30px] bg-white" style="margin: 0 auto">
      <div class="w-full flex flex-col justify-center items-center">
        <div class="font-bold" style="font-size: 20px">
          {{ Info.data.name }}
        </div>
        <div class="mt-[15px] mb-[30px]" style="font-size: 14px">
          由{{ Info.data.brand }}承保
        </div>
      </div>
      <div>
        <el-form
          :model="formData"
          ref="formRef"
          :rules="rules"
          label-width="7vw"
          :inline="false"
          label-position="left"
        >
          <el-form-item label="保险期间" prop="name">
            <div class="flex items-center" style="font-size: 14px">
              <div>自</div>
              <div
                class="w-[130px] h-[30px] border border-[#BEBEBE] rounded-[4px] ml-[10px] flex items-center justify-center"
              >
                <el-date-picker
                  :clearable="false"
                  v-model="param.start_time"
                  :disabled-date="disabledDate1"
                  type="date"
                  value-format="x"
                  @change="pickerChange($event, 1)"
                />
              </div>
              <div
                class="w-[40px] bg-[#FBFBFB] h-[30px] flex justify-center items-center border border-[#BEBEBE] rounded-[4px] ml-[5px]"
              >
                00
              </div>
              ：
              <div
                class="w-[40px] bg-[#FBFBFB] h-[30px] flex justify-center items-center border border-[#BEBEBE] rounded-[4px] ml-[5px]"
              >
                00
              </div>
              ：
              <div
                class="w-[40px] h-[30px] bg-[#FBFBFB] flex justify-center items-center border border-[#BEBEBE] rounded-[4px] ml-[5px]"
              >
                00
              </div>
              <div class="ml-[10px]">起</div>
              <div class="ml-[15px]">至</div>
              <div
                class="w-[130px] h-[30px] border border-[#BEBEBE] rounded-[4px] ml-[10px] flex items-center justify-center"
              >
                <el-date-picker
                  v-model="param.end_time"
                  type="date"
                  :disabled="true"
                  value-format="x"
                  @change="pickerChange($event, 3)"
                />
              </div>
              <div
                class="w-[40px] bg-[#FBFBFB] h-[30px] flex justify-center items-center border border-[#BEBEBE] rounded-[4px] ml-[5px]"
              >
                23
              </div>
              ：
              <div
                class="w-[40px] bg-[#FBFBFB] h-[30px] flex justify-center items-center border border-[#BEBEBE] rounded-[4px] ml-[5px]"
              >
                59
              </div>
              ：
              <div
                class="w-[40px] bg-[#FBFBFB] h-[30px] flex justify-center items-center border border-[#BEBEBE] rounded-[4px] ml-[5px]"
              >
                59
              </div>
              <div class="ml-[10px]">止</div>
              <div class="ml-[10px]">至</div>
              <el-select
                v-model="days"
                class="m-2"
                placeholder="请选择"
                style="width: 100px"
                @change="seleceChnage"
              >
                <el-option
                  v-for="item in daysSelect"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <!-- <div
                class="mx-[10px] w-[50px] h-[30px] border border-[#BEBEBE] rounded-[4px] flex justify-center items-center"
              >
                {{ days < 0 ? 0 : days }}
              </div> -->
              <div class="">天</div>
            </div>
          </el-form-item>
          <div class="w-full border-b border-[#ECECEC] mt-[30px]"></div>
          <!-- 
  投保人信息（主被保人） -->
          <baoItem1
            :cardType="Info.data.cardType"
            :insure="param.insure"
            :cardTypeTwo="Info.data.cardTypeTwo"
            :addInfo="param"
            ref="baoItem1Ref"
          ></baoItem1>
          <div class="w-full border-b border-[#ECECEC] mt-[15px]"></div>
          <!-- 职业类别 -->
          <div>
            <category
              ref="categoryRef"
              :type="Info.data.categoryType"
              :job_code="param.job_code"
            ></category>
          </div>
          <!-- 施工地址 -->
          <div>
            <addressVue ref="addressVueRef" :addInfo="param"></addressVue>
          </div>
          <!-- 保险责任 -->
          <responsibility
            @change="change"
            :start_time="param.start_time"
            :end_time="param.end_time"
            :duty="Info.data.duty"
            :param="param"
            :personCost="personCost"
            ref="responsibilityRef"
          ></responsibility>
          <div class="w-full border-b border-[#ECECEC] mt-[30px]"></div>

          <!-- 被保人清单 -->
          <detailedList
            ref="detailedListRef"
            :user="param.user"
            :userCardType="Info.data.userCardType"
            @getChildrenData="getChildrenData"
            :param="param"
          ></detailedList>
          <div
            class="w-full h-[110px] flex items-center px-[35px] mt-[60px] justify-between"
            style="box-shadow: 0px -3px 8px 0px rgba(143, 143, 143, 0.05)"
          >
            <div>
              <span>保费：</span>
              <span class="text-[#EF6800]">￥</span>
              <span class="text-[#EF6800]" style="font-size: 30px">{{
                cost.toFixed(2)
              }}</span>
              <span class="" style="font-size: 16px">元</span>
            </div>
            <div v-if="route.query.order_id" class="flex items-center">
              <div
                @click="Pay"
                class="w-[100px] h-[35px] flex justify-center items-center text-white rounded-[4px] bg-[#EF6800] cursor-pointer"
              >
                去支付
              </div>
            </div>
            <div class="flex items-center" v-else>
              <div
                @click="openBjsDia"
                class="w-[100px] h-[35px] flex justify-center items-center text-white rounded-[4px] bg-[#EF6800] cursor-pointer"
              >
                报价书
              </div>
              <div
                @click="sublit(formRef, '1')"
                class="w-[100px] h-[35px] flex justify-center items-center text-white rounded-[4px] ml-[20px] bg-[#EF6800] cursor-pointer"
              >
                暂存订单
              </div>
              <div
                @click="sublit(formRef, '0')"
                class="w-[100px] h-[35px] flex justify-center items-center text-white rounded-[4px] ml-[20px] bg-[#EF6800] cursor-pointer"
              >
                提交核保
              </div>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
  <div>
    <!-- 投保须知弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <template #header>
        <div
          class="w-full h-[50px] relative flex justify-center items-center bg-[#F5F5F5]"
        >
          <div style="font-size: 16px">投保须知</div>
          <div
            @click="router.push('/index/home')"
            class="w-[12px] h-[12px] absolute top-[16px] right-[30px] cursor-pointer"
          >
            <el-image
              :src="getAssetsFile('home/close.png')"
              class="w-full h-full"
            ></el-image>
          </div>
        </div>
      </template>
      <div class="p-[30px]" v-html="Info.data.notice ? Info.data.notice : ''"></div>

      <div class="w-full pb-[30px] flex flex-col items-center">
        <div class="w-full flex items-center justify-center">
          <div
            @click="checkedShow = !checkedShow"
            class="flex items-center justify-center"
            :style="
              dialogTime > 0
                ? 'cursor: default;pointer-events: none;'
                : 'cursor: pointer;pointer-events: auto;'
            "
          >
            <el-image
              v-if="checkedShow"
              :src="getAssetsFile('home/active.png')"
              class="w-[18px] h-[18px]"
            ></el-image>
            <el-image
              v-else
              :src="getAssetsFile('home/noactive.png')"
              class="w-[18px] h-[18px]"
            ></el-image>
          </div>
          <span class="ml-[10px]" style="font-size: 16px"
            >已阅读并已详尽知晓上述内容
          </span>
          <span v-if="dialogTime">（{{ dialogTime }}s）</span>
        </div>
        <div class="mt-[30px]">
          <el-button
            @click="closeXzDialog"
            color="#EF6800"
            :dark="true"
            class="w-[240px]"
            size="large"
            :disabled="dialogTime ? true : false"
            ><span class="text-white">我已全部阅读</span></el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
  <div>
    <!-- 报价书 -->
    <el-dialog
      v-model="dialogBjsShow"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <template #header>
        <div class="w-full h-[50px] relative flex justify-center items-center bg-white">
          <div style="font-size: 16px">报价书</div>
          <div
            @click="dialogBjsShow = false"
            class="w-[12px] h-[12px] absolute top-[16px] right-[30px] cursor-pointer"
          >
            <el-image
              :src="getAssetsFile('home/close.png')"
              class="w-full h-full"
            ></el-image>
          </div>
        </div>
      </template>
      <div class="p-[20px] bg-[#F5F5F5]" id="save">
        <div class="w-full bg-white rounded-[10px] py-[30px]">
          <div class="w-full text-center font-bold mb-[20px]" style="font-size: 20px">
            {{ param.insure.name }}
          </div>
          <div class="w-full items-center justify-around flex">
            <div class="flex justify-center items-center flex-col">
              <div class="text-[#535353]" style="font-size: 16px">产品名称</div>
              <div class="mt-[20px] text-[#EF6800] font-bold" style="font-size: 20px">
                {{ Info.data.name }}
              </div>
            </div>
            <div class="flex justify-center items-center flex-col">
              <div class="text-[#535353]" style="font-size: 16px">保费</div>
              <div class="mt-[20px] text-[#EF6800] font-bold" style="font-size: 20px">
                ￥{{ cost.toFixed(2) }}
              </div>
            </div>
            <div class="flex justify-center items-center flex-col">
              <div class="text-[#535353]" style="font-size: 16px">保险期限</div>
              <div class="mt-[20px] text-[#EF6800] font-bold" style="font-size: 20px">
                {{ days }}
              </div>
            </div>
          </div>
        </div>
        <div class="w-full bg-white rounded-[10px] py-[30px] px-[20px] mt-[10px]">
          <div class="mb-[20px]">保险期限</div>
          <div class="flex justify-between items-center w-full text-[#535353] mb-[20px]">
            <div>开始时间</div>
            <div>{{ start_date }}</div>
          </div>
          <div class="flex justify-between items-center w-full text-[#535353]">
            <div>结束时间</div>
            <div>{{ end_date }}</div>
          </div>
        </div>
        <div class="w-full bg-white rounded-[10px] py-[30px] px-[20px] mt-[10px]">
          <div class="">标的要素</div>
          <!-- <div class="mt-[20px] mb-[20px] bg-[#EF6800] w-full h-[1px]"></div> -->
          <!-- <div class="flex justify-between items-center w-full text-[#535353] mt-[20px] mb-[20px]">
            <div>投保年龄</div>
            <div>16周岁-65周岁</div>
          </div> -->
          <div class="flex justify-between items-center w-full text-[#535353]">
            <div>被保险人职业类别</div>
            <div>1-4类职业</div>
          </div>
          <!-- <div
            class="flex justify-between items-center w-full text-[#535353] mb-[20px]"
          >
            <div>项目名称</div>
            <div>{{ param.treetop.name }}</div>
          </div> -->
          <!-- <div
            class="flex justify-between items-center w-full text-[#535353] mb-[20px]"
          >
            <div>施工详细地址</div>
            <div>{{ param.treetop.address }}</div>
          </div> -->
          <!-- <div
            class="flex justify-between items-center w-full text-[#535353] mb-[20px]"
          >
            <div>商铺号/房间号</div>
            <div>{{ param.treetop.room_no }}</div>
          </div> -->
          <!-- <div
            class="flex justify-between items-center w-full text-[#535353] mb-[20px]"
          >
            <div>保障方案</div>
            <div>{{ param.treetop.fanan }}</div>
          </div> -->
        </div>
        <div class="w-full bg-white rounded-[10px] py-[30px] px-[20px] mt-[10px]">
          <div class="">保险责任</div>
          <!-- <div class="mt-[20px] mb-[20px] bg-[#EF6800] w-full h-[1px]"></div> -->
          <div
            v-for="(item, index) in param.duty"
            class="flex justify-between items-center w-full text-[#535353] mt-[20px]"
          >
            <div class="">
              {{ item.title }}
            </div>
            <div v-if="item.money">{{ item.money }}{{ item.unit }}</div>
          </div>
        </div>
        <div class="w-full bg-white rounded-[10px] py-[30px] px-[20px] mt-[10px]">
          <!-- <div class="flex justify-between items-center w-full text-[#535353] mb-[20px]">
            <div>加费</div>
            <div>{{ param.add_price }}</div>
          </div> -->
          <!-- <div class="flex justify-between items-center w-full text-[#535353] mb-[20px]">
            <div>个人保费</div>
            <div>
              {{
            (Number(cost) / param.user.length - Number(param.add_price)).toFixed(2)
          }}
            </div>
          </div>
          <div class="flex justify-between items-center w-full text-[#535353] mb-[20px]">
            <div>被保人数</div>
            <div v-if="param.user">
              {{ param.user.length }}
            </div>
            <div v-else>
              {{ 1 }}
            </div>
          </div> -->
          <div class="flex justify-between items-center w-full text-[#535353]">
            <div>总保费</div>
            <div>{{ Number(cost).toFixed(2) }}</div>
          </div>
        </div>
      </div>

      <div class="w-full h-[78px] flex justify-center items-center">
        <div
          @click="dialogBjsShow = false"
          class="w-[86px] h-[30px] flex justify-center items-center bg-[#DDDDDD] rounded-[4px] text-white cursor-pointer"
        >
          关闭
        </div>
        <div
          @click="saveImage"
          class="w-[86px] h-[30px] flex justify-center items-center bg-[#EF6800] rounded-[4px] text-white ml-[70px] cursor-pointer"
        >
          保存
        </div>
      </div>
    </el-dialog>
  </div>
  <!-- 去支付弹窗 -->
  <el-dialog
    title="支付"
    v-model="payShow"
    width="30%"
    center
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <template #default>
      <span>
        <!-- <el-button @click="payShow = false" text type="primary"
          >Cancel</el-button
        > -->
        <!-- <iframe
          src="http://nxb.yeahshopee.com/uploads/20240104/19addefaf5569299d6cab8442a069d1e.jpg"
        ></iframe> -->
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import type { FormRules, FormInstance } from "element-plus";

import html2canvas from "html2canvas";
import getAssetsFile from "@/utils/getImageurl.ts";
import { regionData } from "element-china-area-data";
import addressVue from "./address.vue";
import { reactive, computed, ComputedRef, ref, watchEffect, inject } from "vue";
import { useRouter, useRoute, onBeforeRouteLeave } from "vue-router";
import responsibility from "./responsibility.vue";
import category from "./category.vue";
import upload from "./upload.vue";
import baoItem2 from "./baoItem2.vue";
import baoItem1 from "./baoItem1.vue";
import elementItem from "./element.vue";
import detailedList from "./detailedList.vue";
import { getInsureInfo, addOrder, orderDetail, getJobClassify } from "@/utils/api";
import * as rrweb from "rrweb";
import { listenerHandler } from "_@rrweb_types@2.0.0-alpha.16@@rrweb/types";
const route = useRoute();
const router = useRouter();
const formData = reactive({
  name: "11",
  startTime: 0,
  endTimer: 0,
});
const payShow = ref(false);
const Rate = ref<number>(0); //费率
const cost = ref<number>(0); //保费
const price = ref(0); //保险责任总保费
const personCost = ref<number>(0); //个人保费
const message = inject<any>("message");
const startTime = ref("");
const dialogVisible = ref(false);
const Info = reactive({ data: {} as infoType });
const dialogHtml = ref(""); //投保须知富文本
const checkedShow = ref(false); //是否勾选阅读
const dialogBjsShow = ref(false); //报价书弹窗\
const detailedListRef = ref<InstanceType<typeof detailedList>>();
const uploadRef = ref<InstanceType<typeof upload>>();
const responsibilityRef = ref<InstanceType<typeof responsibility>>();
const addressVueRef = ref<InstanceType<typeof addressVue>>();
const elementItemRef = ref<InstanceType<typeof elementItem>>();
const baoItem2Ref = ref<InstanceType<typeof baoItem2>>();
const baoItem1Ref = ref<InstanceType<typeof baoItem1>>();
const categoryRef = ref<InstanceType<typeof category>>();
const formRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  name: [{ required: true, message: "Please input Activity name", trigger: "blur" }],
});
const daysSelect = ref([
  {
    label: "1",
    value: "1",
  },
  {
    label: "3",
    value: "3",
  },
  {
    label: "7",
    value: "7",
  },
  {
    label: "15",
    value: "15",
  },
  {
    label: "30",
    value: "30",
  },
  {
    label: "60",
    value: "60",
  },
  {
    label: "90",
    value: "90",
  },
  {
    label: "180",
    value: "180",
  },
  {
    label: "365",
    value: "365",
  },
]);
const days = ref(0);
const dialogTime = ref(5); //弹框的倒计时
const param = reactive({
  id: 0,
  bx_id: 0, //保险id
  start_time: 0, //开始时间
  end_time: 0, //结束时间
  insure: {
    name: "", //投保人名称
    card_type: "", //投保人证件类型
    card_no: "", //投保人证件号
    contact: "", //投保人联系人
    contact_mobile: "", //投保人联系人手机号
    mailbox: "", //邮箱
    insure_type: "", //传单位和个人文字
    address: "",
  },
  insured: [],
  treetop: {
    type: "",
    name: "",
    structure: "",
    area_num: "",
    province: "",
    city: "",
    area: "",
    address_id: "",
    room_no: "",
    fanan: "",
    address: "",
  },
  duty: [] as any[],
  annex: [],
  user: [],
  card_type: "",
  job_code: "",
  address: "",
  province: "",
  province_code: "",
  city: "",
  city_code: "",
  area: "",
  area_code: "",
  add_price: "",
  is_show: "",
  mark: [],
}) as any;
const start_date = ref("");
const end_date = ref("");
watchEffect(() => {
  if (param) {
    //订单详情
    if (route.query.order_id) {
      days.value = Math.floor((param.end_time - param.start_time) / (1000 * 3600 * 24));
      return;
    }
  }
  if (param.user.length > 0) {
    // console.log(cost.value, param.user.length);

    countCost();

    // cost.value = cost.value * param.user.length + Number(param.add_price);
  }
});
let stopFun: listenerHandler | undefined;
onBeforeRouteLeave(() => {
  if (stopFun) {
    stopFun();
  }
  param.mark = [];
});
//开始录制
const player = () => {
  let stop = rrweb.record({
    emit(event: any) {
      param.mark.push(event);
    },
  });
  stopFun = stop;
};
player();
//禁止开始时间
const disabledDate1 = (time: Date) => {
  return time.getTime() < Date.now();
};
//时间筛选
const seleceChnage = (v: any) => {
  if (!param.start_time) {
    param.start_time =
      Number(new Date(new Date().setHours(0, 0, 0, 0))) + 1000 * 60 * 60 * 24;
  }
  param.end_time = param.start_time + (v - 1) * 1000 * 3600 * 24;

  start_date.value = setDate(param.start_time);
  end_date.value = setDate(param.end_time);
  countCost();
};
//计算保费
const countCost = () => {
  Rate.value = costRate() as number;
  price.value = 0;
  responsibilityRef.value?.list.forEach((item: any) => {
    price.value += Number(item.price);
  });
  cost.value = (price.value * Rate.value + Number(param.add_price)) * param.user.length;
  personCost.value = price.value * Rate.value;
};
//获取职业类别数据
const getCategory = async () => {
  const res = await getJobClassify("");
  Info.data.categoryType = res.msg;
  // console.log(res);
};
//支付
const Pay = () => {
  payShow.value = true;
};
//子组件计算保费
const change = (value: Array<any>) => {
  price.value = 0;
  value.forEach((item: any) => {
    price.value += Number(item.price);
  });
  Rate.value = costRate() as number;
  // let add_price = responsibilityRef.value?.add_price as number;
  countCost();
  // console.log(param.user.length);
};
//计算费率
const costRate = () => {
  // console.log(days.value);

  if (days.value <= 0) {
    return 0;
  } else if (days.value == 1) {
    return 0.03;
  } else if (days.value >= 2 && days.value <= 3) {
    return 0.06;
  } else if (days.value >= 4 && days.value <= 7) {
    return 0.1;
  } else if (days.value >= 8 && days.value <= 15) {
    return 0.12;
  } else if (days.value >= 16 && days.value <= 30) {
    return 0.2;
  } else if (days.value >= 31 && days.value <= 60) {
    return 0.3;
  } else if (days.value >= 61 && days.value <= 90) {
    return 0.4;
  } else if (days.value >= 91 && days.value <= 180) {
    return 0.7;
  } else if (days.value >= 181 && days.value <= 365) {
    return 1;
  }
};
//根据时间戳转年月日
const setDate = (value: number) => {
  let date = new Date(value);
  let y: any;
  let m: any;
  let d: any;
  y = date.getFullYear();
  m = date.getMonth() + 1;
  m = m < 10 ? "0" + m : m;
  d = date.getDate();
  d = d < 10 ? "0" + d : d;
  let dates = y + "-" + m + "-" + d;

  return dates;
};
//获取页面数据
const getData = async () => {
  if (route.query.id && !route.query.order_id) {
    const res = await getInsureInfo({ id: route.query.id });
    Info.data = res.msg;
    param.start_time = Date.now() + 1000 * 60 * 60 * 24;
    dialogVisible.value = true;
    start_date.value = setDate(param.start_time);
    end_date.value = setDate(param.end_time);
    Info.data.duty[1].data.forEach((item: any, index: number) => {
      if (index != 1) {
        item["disabled"] = true;
      }
    });
  }
  getCategory();
};
getData();

//时间
const pickerChange = (_: any, i: number) => {
  //i 1是开始时间 2是结束时间
  if (i == 1) {
    if (!param.end_time) {
      param.end_time = param.start_time;
      days.value = 1;
      return;
    }
    // param.start_time = v;
    param.end_time = param.start_time - 1000 * 3600 * 24 + days.value * 1000 * 3600 * 24;
  } else {
    // param.end_time = v;f
    // days.value =
    //   Math.floor((param.end_time - param.start_time) / (1000 * 3600 * 24)) + 1;
  }
  price.value = 0;
  Rate.value = costRate() as number;

  responsibilityRef.value?.list.forEach((item: any) => {
    price.value += Number(item.price);
  });
  start_date.value = setDate(param.start_time);
  end_date.value = setDate(param.end_time);
  countCost();
};

//获取子组件数据
const getChildrenData = () => {
  // console.log(categoryRef.value?.Info);

  let insured = baoItem2Ref.value?.list; //附加被投保人信息
  param.id = route.query.order_id;
  param.bx_id = route.query.id;
  param.insure = baoItem1Ref.value?.Info as any;
  // param.job_code = categoryRef.value?.Info.job_code as any;
  param.insured = insured as any;

  param.treetop = elementItemRef.value?.Info as any;
  param.duty = responsibilityRef.value?.list as any;
  param.annex = uploadRef.value?.uploadList as any;
  param.user = detailedListRef.value?.list as any;
  param.address = addressVueRef.value?.addInfo.address as any;
  // let addInfo = baoItem1Ref.value?.addInfo as addInfoType;
  // let key: keyof addInfoType;
  // for (key in addInfo) {
  //   param[key] = addInfo[key];
  // }
  // param.add_price = responsibilityRef.value?.add_price as any;
};
//打开报价书
const openBjsDia = () => {
  dialogBjsShow.value = true;
  getChildrenData();
};
const sublit = async (_: FormInstance | undefined, index: string) => {
  //baoItem1Ref.value?.Info 投保人
  getChildrenData();
  param.is_show = index;
  if (param.address.length < 5) {
    message.warning("施工地址不得少于五个字");
    return;
  }
  if (stopFun) {
    stopFun();
  }
  const res = await addOrder(param);
  if (res.code == 1) {
    message.success("提交成功");
    if (index == "0") {
      router.replace("/index/zj_dqyw/pay?order_id=" + res.msg + "&id=" + route.query.id);
    } else if (index == "1") {
      router.push("/index/person/orderPay?type=0&parentIndex=0");
    }
  } else {
    message.warning(res.msg);
  }
  let order_id = res.msg;
  // console.log(res);
};

const address = reactive<{
  province: string;
  city: string;
  area: string;
}>({
  province: "",
  city: "",
  area: "",
});
interface AreaList {
  value: string;
  label: string;
  children?: AreaList[];
}
//切换省份函数
const handleProvinceSelect = () => {
  address.city = "";
  address.area = "";
};
// const getAddress = ({
//   name,
// }: {
//   code: string[];
//   name: string[];
//   isComplete: boolean;
// }) => {
//   console.log(name);
// };
// //切换城市函数
// const handleCitySelect = () => {
//   address.area = "";
// };
// //切换地区函数
// const handleAreaSelect = () => {};
// //二级城市列表
// const cityList: ComputedRef<AreaList[]> = computed((): AreaList[] => {
//   if (!address.province) {
//     return [];
//   }
//   let temp = regionData.find((item: any) => {
//     return item.value == address.province;
//   });

//   return temp!.children ? temp!.children : [];
// });
// const areaList: ComputedRef<AreaList[]> = computed((): AreaList[] => {
//   if (!address.province || !address.city) {
//     return [];
//   }
//   if (cityList.value.length == 0) {
//     return [];
//   } else {
//     let temp = cityList.value.find((item: any) => {
//       return item.value == address.city;
//     });
//     if (temp) {
//       return temp.children ? temp.children : [];
//     } else {
//       return [];
//     }
//   }
// });

//倒计时
const countDown = () => {
  let t = setInterval(() => {
    dialogTime.value--;
    if (dialogTime.value <= 0) {
      clearInterval(t);
    }
  }, 1000);
};
countDown();

/** html转base64 */
const saveImage = () => {
  html2canvas(<HTMLElement>document.querySelector("#save"), {
    useCORS: true,
  }).then((canvas: any) => {
    const base64 = canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, "");
    const base64img = `data:image/png;base64,${base64}`;
    downloadBase64(base64img, "下载图片");
  });
};
/** 下载图片 */
const downloadBase64 = (content: string, fileName: string) => {
  var base64ToBlob = function (code: any) {
    let parts = code.split(";base64,");
    let contentType = parts[0].split(":")[1];
    let raw = window.atob(parts[1]);
    let rawLength = raw.length;
    let uInt8Array = new Uint8Array(rawLength);
    for (let i = 0; i < rawLength; ++i) {
      uInt8Array[i] = raw.charCodeAt(i);
    }
    return new Blob([uInt8Array], {
      type: contentType,
    });
  };
  let aLink = document.createElement("a");
  let blob = base64ToBlob(content);
  aLink.download = fileName + ".png";
  aLink.href = URL.createObjectURL(blob);
  aLink.click();
};
//关闭弹窗须知
const closeXzDialog = () => {
  if (!checkedShow.value) return;
  dialogVisible.value = false;
};
</script>
<style scoped lang="scss">
:deep(.el-dialog__header) {
  padding: 0 !important;
  margin: 0 !important;
}

:deep(.el-dialog__body) {
  margin: 0 !important;
  padding: 0 !important;
}

:deep(.el-input__inner) {
  color: black !important;
}

:deep(.el-dialog) {
  padding: 0 !important;
}
</style>
